<template>
	<div>
		<component :is="f.getVNode()"></component>

		<el-button @click="change('preview')">preview</el-button>
		<el-button @click="change('edit')">edit</el-button>
		<el-button @click="verifier">verifier</el-button>
		<el-button @click="get">get</el-button>
		<el-button @click="clear">clear</el-button>
		<el-button @click="set">set</el-button>
		<el-button @click="disabled">disabled</el-button>

		<el-button @click="open">open</el-button>
	</div>
</template>

<script setup lang="ts">
import { FDP } from ".";
import { dialog } from "@pkg";
import { htmlDoc, htmlDoc2 } from "./doc-html";

const f = new FDP();
const form = f.getForm("form");

const change = (type: "preview" | "edit") => {
	f.getForm("form").setType(type);
};

const disabled = () => {
	form.setFormDisabled(true);
	form.removeFormButton("btn1");
	form.removeFormItem("editor");
};

const verifier = async () => {
	console.log(await f.getForm("form").verify(), 'f.getForm("form").verify()');
};
const get = async () => {
	console.log(f.getForm("form").getFormValue(), "getFormValue");
};

const set = () => {
	form.setFormItemValue("editor", Math.round(Math.random()) > 0.5 ? htmlDoc : htmlDoc2);
	form.setFormValue({
		// money: 123,
		// sg: "beijin-shixiaqu-tongzhouqu-yuqiaojiedao",
	});

	// form.setFormItemValue("money", " ");
	// form.setFormItemValue("name", "1,2");
	// form.setFormItemValue("money", 10000);
	// form.setFormItemValue("select", "3");
	// form.setFormItemValue("switch", "N");
	// form.setFormItemValue("image", [url]);
	// form.setFormItemValue("file", url);
	// form.setFormItemValue("map", {
	// 	lat: "21.48054",
	// 	lng: "31.235929",
	// } as any);
};

const clear = () => {
	f.getForm("form").clear();
	console.log(f.getForm("form").getFormValue());
};

const open = () => {
	dialog
		.initForm(form => {
			form.addFormItem({
				key: "name",
				component: "Input",
				label: "名字",
				value: "zhangsanya",
				rule: "RequiredRule",
			});
			form.addFormItem({
				component: "InputNumber",
				label: "金额",
				value: 90,
				key: "money",
				rule: "RequiredRule",
			});
			form.addFormItem({
				key: "time",
				component: "DatePicker",
				label: "时间",
				rule: "RequiredRule",
				value: [new Date().getTime(), new Date().getTime() + 1000 * 60 * 60 * 24 * 6],
				conf: {
					type: "daterange",
				},
			});
			form.addFormItem({
				component: "UploadImg",
				label: "图片",
				rule: "RequiredRule",
				value: [],
				key: "image",
				conf: {
					limit: 1,
					isAutoUpload: true,
				},
			});
			form.addFormItem({
				key: "select",
				component: "Select",
				label: "下拉选择",
				rule: "RequiredRule",
				value: 2,
				conf: {
					options: () =>
						Promise.resolve([
							{ label: "zhangsan", value: 1 },
							{ label: "lisi", value: 2 },
							{ label: "wangwu", value: 3 },
						]),
				},
			});
		})
		.open({
			title: "嘻嘻嘎嘎",
			width: "80%",
		});
};

const url =
	"https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0";
</script>

<style lang="scss" scoped></style>
